<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>为HTML添加新元素
  </title>
  <script>
    document.createElement("myHero1")
  </script>
  <style>
    myHero {
      display: block;
      background-color: #ddd;
      padding: 50px;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <h1>First title</h1>
  <p>First paragraph</p>
  <myHero> First element</myHero>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
  <base href="http://www.runoob.com/images/" target="_blank">
  <style type="text/css">
    body {
      background-color: yellow
    }

    p {
      color: blue
    }
  </style>
</head>

<body>
  <img src="logo.png">- 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
  <br>
  <p>这是测试head中的style元素</p>
  <br>
  <a href="http://www.runoob.com">菜鸟教程</a>- 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
  <style type="text/css">
    h1 {
      color: red;
    }

    p {
      color: blue;
    }
  </style>
</head>

<body>
  <h1>这是测试style的h1的设置</h1>
  <p>这是测试style的p的设置</p>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <a href="http://www.runoob.com" style="text-decoration:none;">访问 runoob.com!</a>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1>我使用了外部样式文件来格式化文本</h1>
  <p>我也是！</p>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <img border="0" src="./images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <h1 style="text-align:center">文字居中测试</h1>
  <table border="1">
    <tr>
      <td>100</td>
    </tr>
  </table>
  <table border="1">
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
    </tr>
  </table>
  <table border="1">
    <caption style="text-align:left">表格标题,默认居中</caption <tr>
    <th>Name</th>
    <th>Telephone</th>
    <th>Telephone</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
  </table>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <h4>单元格跨两格</h4>
  <table border="1">
    <tr>
      <th>name</th>
      <th colspan="2">tel</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 054</td>
      <td>555 77 055</td>
    </tr>
  </table>
  <table>
    <caption>单元格跨两列</caption>
    <tr>
      <th>First Name:</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th rowspan="2">Tel</th>
      <td>555 77 054</td>
    </tr>
    <tr>
      <td>555 77 055</td>
    </tr>
  </table>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <table border="1">
    <caption>表格内的标签</caption>
    <tr>
      <td>
        <p>这是一个段落</p>
        <p>这是另一个段落</p>
      </td>
      <td>
        这个单元格包含一个表格
        <table border="0.5">
          <tr>
            <td>A</td>
            <td>B</td>
          </tr>
          <tr>
            <td>C</td>
            <td>D</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>这个单元格包含一个列表
        <ul>
          <li>apples</li>
          <li>bananas</li>
          <li>pineapples</li>
        </ul>
      </td>
      <td>HELLO</td>
    </tr>
  </table>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <table border="1">
    <caption>没有单元格边距</caption>
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
  </table>
  <table border="1" cellpadding="10">
    <caption>有单元格边距</caption>
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
  </table>
  <table border="1">
    <caption>没有有单元格间距</caption>
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
  </table>
  <table border="1" cellspacing="10">
    <caption>有单元格间距</caption>
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
  </table>
</body>

</html> -->


<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <h4>无序列表</h4>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
  <ol type="A">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol start="50">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <div id="container" style="width:500px">
    <div id="header" style="background-color:#FFA500">
      <h1 style="margin-bottom:0;">主要的网页标题</h1>
    </div>
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left">
      <b>菜单</b>
      <br>HTML
      <br>CSS
      <br>JavaScript
    </div>
    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
      内容在这里
    </div>
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
      版权 © runoob.com</div>
  </div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>

  <table width="500" border="0">
    <tr>
      <td colspan="2" style="background-color:#FFA500;">
        <h1>主要的网页标题</h1>
      </td>
    </tr>

    <tr>
      <td style="background-color:#FFD700;width:100px;vertical-align:top;">
        <b>菜单</b><br> HTML
        <br> CSS
        <br> JavaScript
      </td>
      <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
        内容在这里</td>
    </tr>

    <tr>
      <td colspan="2" style="background-color:#FFA500;text-align:center;">
        版权 © runoob.com</td>
    </tr>
  </table>

</body>

</html> -->

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>runoob.com</title>
</head>

<body>
  <form action="">
    UserName<input type="text" name="user" value="">
    <br> Password:
    <input type="password" name="password" value="">
  </form>
  <br>
  <form class="" action="" method="post">
    <input type="radio" name="sex" value="male">Male
    <br> <input type="radio" name="sex" value="female">Female
  </form>
  <br>
  <form class="" action="" method="post">
    <input type="checkbox" name="vehicle" value="Bike">I have a bike.
    <br> <input type="checkbox" name="vehicle" value="Car"> I have a car.
  </form>
  <br>
  <form class="" action="" method="post">
    UserName:<input type="text" name="username" value="">
    <input type="submit" name="" value="Submit">
  </form>
  <form class="" action="" method="post">
    <select class="" name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="bmw" selected>BMW</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </form>
  <p><b>注意：</b>表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符</p>
</body>

</html>
